
<script>

import * as echarts from "echarts";
import 'echarts-wordcloud';
import {onMounted, ref} from "vue";
import chinaMap from "../../assets/geojson/china.json"
import sichuan from "../../assets/geojson/四川省.json"

const map = {
  sichuan:sichuan,
  china:chinaMap
}
export default {
  name:"Main",
  setup(){
    let Echarts = echarts;
    let nowPrivence = "四川省";
    let now = "china"
    let province_city_number = {}
    let province_salary = {}
    let province_category = {}
    let category_salary = {}
    let category_city_salary = {}
    let wordCloud=ref(null)
    

 // 加载词云图
 const loadWordCloud = (category) => {
  //alert(category)
        fetch(`src/assets/data/${category}_job_skills.json`)
            .then(response => response.json())
            .then(data => {
              console.log(data)
                const wordData = data.map(item => ({
                    name: item[0],
                    value: item[1]
                }));
                const option = {
                    tooltip: {},
                    series: [{
                        type: 'wordCloud',
                        gridSize: 2,
                        sizeRange: [8, 50],
                        rotationRange: [-90, 90],
                        shape: 'pentagon',
                        width: 400,
                        height: 210,
                        drawOutOfBound: true,
                        textStyle: {
                            normal: {
                                color: function () {
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160)
                                    ].join(',') + ')';
                                }
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        data: wordData
                    }]
                };
                wordCloud.value.setOption(option);
            })
            .catch(error => {
                console.error('Error loading the word cloud data:', error);
            });
    }

    
    onMounted(()=>{
      wordCloud.value=echarts.init(document.getElementById('word-cloud'));; // 声明 wordCloud 变量
      loadWordCloud('前端开发')
      const a = new Promise((resolve,reject)=>{
        d3.json("src/assets/output.json",function (error,data){
          for (let province in data) {
            if (data.hasOwnProperty(province)) {
              let cities = data[province].city;
              let numbers = data[province].number;
              province_city_number[province] = cities.map((city, index) => ({
                name: city,
                value: numbers[index]
              }));
            }
          }
          resolve()
        })
      })
      const b = new Promise((resolve,reject)=>{
        d3.json("src/assets/province_salary.json",(err,res)=>{
          province_salary = res
          resolve(res)
        })
      })
      const c = new Promise((resolve,reject)=>{
        d3.json("src/assets/provice_category.json",(err,res)=>{
          province_category = res
          resolve(res)
        })
      })
      const d = new Promise((resolve,reject)=>{
        d3.json("src/assets/category_salary.json",(err,res)=>{
          category_salary = res
          resolve(res)
        })
      })
      const e = new Promise((resolve,reject)=>{
        d3.json("src/assets/category_city_salary.json",(err,res)=>{
          category_city_salary = res
          resolve(res)
        })
      })
      Promise.all([a,b,c,d,e]).then(()=>{
        console.log(province_salary["四川省"])
        initChart(province_city_number[nowPrivence])
        initMap()
        initzhe(category_city_salary[nowPrivence])
        initc(province_category[nowPrivence])
        initd()
        inite(province_salary[nowPrivence].city,province_salary[nowPrivence].salary)
        initf(category_salary[nowPrivence].category,category_salary[nowPrivence].value)
      })

    })
    
    const initf = (x,y)=>{
      let main = Echarts.init(document.querySelector(".g"),null,{
        height:200
      })
      let dataAxis = x
      let data = y
      let yMax = 30000;
      let dataShadow = [];
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }
      let content = {
        "后端开发":"岗位职责： \n" +
            "<br />负责技术平台产品设计开发、规范制订、文档编写、实施推广、技术支持； \n" +
            "<br /> \n" +
            "<br />任职条件： \n" +
            "<br />1、4年以上开发经验 \n" +
            "<br />2、精通java或go语言，熟练使用主流开源框架和常用并发模型； \n" +
            "<br />3、具备良好的沟通能力，较强的逻辑思维和优秀问题解决能力，善于分析复杂技术问题； \n" +
            "<br />4、具备一定设计能力，熟悉常用设计模试、领域驱动设计、分布式技术架构、微服务； \n" +
            "<br />",
        "前端开发":"\"岗位职责： \n" +
            "<br /> \n" +
            "<br />1. 负责数据应用业务（包括数据平台、用户画像等）系统的设计与开发； \n" +
            "<br /> \n" +
            "<br />2. 负责现有Web系统的维护、升级改造和性能优化； \n" +
            "<br /> \n" +
            "<br />3. 跟进最新前后端技术，创造高效好用的数据应用； \n" +
            "<br /> \n" +
            "<br />4. 与团队其他角色紧密配合工作，共同创造稳定易用的产品。 \n" +
            "<br /> \n" +
            "<br /> \n" +
            "<br /> \n" +
            "<br />岗位要求： \n" +
            "<br /> \n" +
            "<br />1. 熟练掌握 Web 前端研发相关知识基础技能，如 HTML、CSS、JavaScript，以及常见前端框架如 Vue 等； \n" +
            "<br /> \n" +
            "<br />2. 掌握前后端交互的相关知识和一定的 Web 后端知识，如 HTTP、MySQL 等； \n" +
            "<br /> \n" +
            "<br />3. 熟悉后台开发语言，有Node.js/Gola\"\n",
        "人工智能":"\"岗位职责： \n" +
            "<br />1、结合电商的业务特性，进行模型和算法创新，打造业行领先的机器学习/深度学习算法平台能力。 \n" +
            "<br />2、超大规模的机器学习模型优化，包括但不限于深度学习、强化学习、表征学习等，最大效率地提升电商流量效率。 \n" +
            "<br /> \n" +
            "<br /> \n" +
            "<br />岗位要求： \n" +
            "<br />1、计算机及相关专业，具有扎实的算法和数据结构，优秀的问题理解能力和编码能力。 \n" +
            "<br />2、扎实的机器学习理论基础，具有行业常用的机器学习算法实践经验。 \n" +
            "<br />3、熟悉业界主流的机器学习平台，有大规模机器学习平台的研发经验者优先，有Tensorflow/PyTorch等机器学习框架使用经验者优先。 \n" +
            "<br />4、具有电商相关业务的算法实践经验者优先，包括但不限于推荐、广告、搜索等。 \n" +
            "<br />5、良好的团队合作和协调沟通能力，学习能力强，自我驱动力强。\"\n",
        "移动开发":"\"岗位职责： \n" +
            "<br />1.根据产品需求，给出最优的页面前端结构解决方案，并设计与实现前端框架； \n" +
            "<br /> 2.负责各业务模块前端代码开发；与产品经理合作，以持续改善公司产品的用户体验； \n" +
            "<br />3.与产品经理及UI设计师充分沟通用户UE需求，并根据效果图Axure原型输出WEB原型；页面的制作（html5+css3+JS），与后台开发工程师配合完成前端和后台的整合； \n" +
            "<br />4.负责系统页面优化，解决跨浏览器及版本的兼容性问题；性能调优； 5.开发针对产品和技术特点的前端开发框架和组件库； \n" +
            "<br />功能开发，测试问题解决。 \n" +
            "<br /> \n" +
            "<br />岗位要求： \n" +
            "<br />1、计算机及相关专业本科及以上学历； \n" +
            "<br /> 2、 \n" +
            "<br />5年以上前端开发经验，具备大型互联网公司前端工作经验优先； 3、精通Vue前端框架至少一种，了解其核心功能的实现\"\n",
        "运维":"\"岗位职责： \n" +
            "<br />1. 负责阿里云自建k8s集群的日常运维工作，包括集群的部署、升级、监控和故障处理等； \n" +
            "<br />2. 负责云效DevOps平台的日常运维工作，包括环境配置、问题排查和性能优化等； \n" +
            "<br />3. 参与制定和优化运维流程，提高运维效率和稳定性； \n" +
            "<br />4. 跟进新技术的发展和应用，及时引入和推广新的运维工具和方法； \n" +
            "<br />5. 协助开发团队处理线上问题，提供技术支持和建议； \n" +
            "<br />6. 定期对系统进行安全性评估和漏洞扫描，及时修复和加固系统。 \n" +
            "<br /> \n" +
            "<br />岗位要求： \n" +
            "<br />1.本科及以上学历，计算机相关专业，有较强的学习能力和问题解决能力； \n" +
            "<br />2. 对Linux操作系统和网络有较好的了解，熟悉常用的Linux命令和基本网络原理； \n" +
            "<br />3. 熟悉Docker和Kubernetes的基本原\"\n",
        "测试":"\"岗位职责： \n" +
            "<br />1）熟练使用TAPD、JIRA、禅道任意一种研发管理平台 \n" +
            "<br />2）熟练掌握测试设计的方法理论，能依据产品需求说明设计充分的测试用例 \n" +
            "<br />3）熟悉HTTP、js、微服务等，熟悉SQL及Python等脚本语言，具有较丰富的Web、移动端的H5、Restful等的测试经验 \n" +
            "<br />4）有基于UI或接口的自动化测试建设经验属加分项 \n" +
            "<br />5）爱思考、能吃苦，具有一定的抗压能力\"\n"
      }
      main.setOption(
          {
              tooltip:{
              show:true,
              position:['0%','-90%'],
              formatter:function (params, ticket, callback) {
                console.log(params.name)
                return (
                    `
                    ${params.name}${content[params.name]}`
                );
              }
            },
            title: {
              text: `${nowPrivence}薪资`,
              textStyle:{
                color:"#c118f0",
                fontSize:16,
                fontFamily:"宋体",
                fontWeight:"normal"
              }
            },
            xAxis: {
              data: dataAxis,
              axisLabel: {
                inside: true,
                color: "white"
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              z: 10
            },
            yAxis: {
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#9c68e9'
              }
            },
            dataZoom: [
              {
                type: 'inside'
              }
            ],
            series: [
              {
                type: 'bar',
                showBackground: true,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#cc83f6' },
                    { offset: 0.5, color: '#b318f0' },
                    { offset: 1, color: '#c118f0' }
                  ])
                },
                emphasis: {
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#cc83f6' },
                      { offset: 0.7, color: '#b318f0' },
                      { offset: 1, color: '#c118f0' }
                    ])
                  }
                },
                data: data
              }
            ]
          }
      )
      const zoomSize = 6;
      main.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        main.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
              dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
      });
    }
    const inite = (x,y)=>{
      console.log(x,y)
      let main = Echarts.init(document.querySelector(".d"))
      main.setOption(
          {
            title:{
              text:`${nowPrivence}岗位薪资`,
              textStyle:{
                color:"#9c68e9",
                fontSize:16,
                fontWeight:"normal",
                fontFamily:"宋体"
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {

                type: 'shadow'
              }
            },
            legend: {
              show:false
            },
            grid: {
              left: 0,
              right: '0%',
              bottom: '0%',
              containLabel: true
            },
            xAxis: {
              type: 'value'
            },
            yAxis: {
              type: 'category',
              data: x
            },
            series: [
              {
                name: '薪资',
                type: 'bar',
                stack: 'total',
                label: {
                  show: false,
                },
                emphasis: {
                  focus: 'series'
                },
                data: y
              }
            ]
          }
      )
    }
    const initd = ()=>{
      let main = Echarts.init(document.querySelector(".f"))
      window.addEventListener('resize',()=>{
        main.resize()
      })
      const a = new Promise((resolve,reject)=>{
        d3.json("src/assets/max.json",(err,res)=>{
          resolve(res)
        })
      })
      a.then(data=>{
        main.setOption(
            {
              title: {
                text: '部分城市薪资',
                left: 'top',
                textStyle:{
                  color:'#9c68e9',
                  fontWeight: 'normal',
                  fontFamily:'宋体',
                  fontSize: 16
                }
              },

              tooltip: {
                trigger: 'item'
              },
              series: [
                {

                  label:{
                    textStyle:{
                      color:"#9c68e9"
                    }
                  },
                  left:0,
                  name: '薪资对比',
                  type: 'pie',
                  radius: '75%',
                  data: data,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            }
        )
      })

    }
    const initc=(data)=>{
      let main = Echarts.init(document.querySelector(".c"))
      window.addEventListener('resize',()=>{
        main.resize()
      })
      main.setOption(
          {
            title: {
              text: `${nowPrivence}职位数量分布`,
              left: 'center',
              textStyle:{
                color:'#9c68e9',
                fontWeight: 'normal',
                fontFamily:'宋体',
                fontSize: 16
              }
            },

            legend: {
              top: 'bottom',
              type:'scroll',
              textStyle:{
                color:'#9c68e9'
              }
            },
            tooltip: {
              trigger: 'item'
            },
            series: [
              {
                label:{
                  textStyle:{
                    color:"#9c68e9"
                  }
                },
                name: '数量分布',
                type: 'pie',
                radius: [50, 100],
                center: ['50%', '85%'],
                startAngle: 180,
                endAngle: 360,
                itemStyle: {
                  borderRadius: 1
                },
                data: data
              }
            ]
          }
      )
      // 添加点击事件处理程序
    main.on('click', function (params) {
        if (params.data) {
         
            const selectedCategory = params.data.name; // 获取点击的类别名称
            loadWordCloud(selectedCategory); // 根据类别加载词云图
        }
    });
    }
    const initzhe=(data)=>{
      let main = Echarts.init(document.querySelector(".e"))
      window.addEventListener('resize',function (){
        main.resize()
      })

      let a = data.category.map(it => (
          {name:it,
            type:'line',
            stack:'Total',
            areaStyle:{},
            emphasis:{
              focus:'series'
            },
            data:data[it]
          }

          )
      )
      console.log(a)
      main.setOption(
          {
            title: {
              text: '薪资折线图',
              right:0,
              top:20,
              textStyle:{
                color:"#9c68e9",
                fontWeight:"normal",
                fontFamily:"宋体",
                fontSize:16
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend: {
              data: data.category,
              textStyle:{
                color:'#9c68e9'
              }
            },

            grid: {
              left: '0%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: data.city,

              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series:a
          }
      )
    }
    const initMap=()=>{
      Echarts.registerMap('china',map[now])
      let main = Echarts.init(document.querySelector(".b"))
      const a = new Promise((resolve,reject)=>{
        d3.json("src/assets/provice.json",function (error,res){

          const data = res.map(item=>{
            const [name,value] = Object.entries(item)[0];
            return {name,value}
          })
          console.log(data)
          resolve(data)
        })
      })
      window.addEventListener('resize', function() {
        main.resize();
      });
      a.then((data)=>{
        main.setOption({
          emphasis: {
            //高亮时地图区域背景颜色
            itemStyle: {
              areaColor: 'white',
            },
            //文字颜色，样式在此处
            label: {
              color: '#fff'
            }
          },
          visualMap: {
            min: 0,
            max: 50, // 根据你的数据范围调整最大值
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            textStyle:{
              color:"white"
            },
            calculable:true,
            inRange: {
              color: ['#e0ffff', '#006edd'] // 蓝色渐变
            }
          },
          series: [{
            top:100,
            name: 'Data', // 系列名称
            type: 'map',
            mapType: 'china',
            zoom:1.7,
            data: data, // 刚刚转换的数据
            label: {
              show: true,
              textStyle:{
                fontSize:10
              }
            },
            itemStyle: {
            }
          }]
        })
      })

      main.on('click',(e)=>{
        nowPrivence=e.name
        initChart(province_city_number[nowPrivence])
        inite(province_salary[nowPrivence].city,province_salary[nowPrivence].salary)
        initc(province_category[nowPrivence])
        initf(category_salary[nowPrivence].category,category_salary[nowPrivence].value)
        initzhe(category_city_salary[nowPrivence])
      })
    }
    const initChart=(data)=>{
      let main = Echarts.init(document.querySelector(".a"),null,{
        height:200
      })
      window.addEventListener('resize', function() {
        main.resize();
      });
      main.setOption(
          {
            title:{
              text:`${nowPrivence}职位数量分布`,
              left:80,
              textStyle:{
                color:"#9c68e9",
                fontWeight:"normal",
                fontSize:16,
                fontFamily:"宋体"
              }
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left:-10,
              top: 0,
              type:"scroll",
              textStyle:{
                color:'#9c68e9'
              }
            },
            series: [
              {
                name: '城市职位数量',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: true,
                padAngle: 5,
                itemStyle: {
                  borderRadius: 10
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 20,
                    fontWeight: 'bold',
                  }
                },
                labelLine: {
                  show: false
                },
                data:data
              }
            ]
          }
      )
    }

  }
}

</script>
<template>
  <div class="main" ref="main" id="main">
    <div class="a item"></div>
    <div class="b item"></div>
    <div class="c item"></div>
    <div class="d item"></div>
    <div class="e item"></div>
    <div class="f item"></div>
    <div class="g item"></div>
    <div class="ciyun item"> <!-- ci yun 区域 -->
        <div id="word-cloud" style="height: 100%;width: 100%;"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main{
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "city main main zhu"
                       "he main main ciyun"
                       "j z z t";
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(3,200px);
  >.item{
    width: 100%;
    border: 20px solid #fff;
    border-image: url("../../assets/border.png") 100 space;

  }
  >.a{
    grid-area: city;

  }
  >.b{
    grid-area: main;
  }
  >.c{
    grid-area: zhu;
  }
  >.d{
    grid-area: he;
  }
  >.e{
    grid-area: t;
  }
  >.f{
    grid-area: j;
  }
  >.g{
    grid-area: z;
  }
  > .ciyun {
    grid-area: ciyun; /* 将 ci yun 区域定义为 ciyun */
    
  }
}
</style>
